#vocab-hover-box {
    position: absolute;
    width: 300px;
    min-height: 40px;
    background-color: var(--v-foreground-base);
    z-index: 5;
    transform-origin: top;
    border-color: rgb(190, 190, 190);
    font-size: 14px !important;
    text-align: left !important;
    
    ul li {
        list-style: none;
    }

    .reading {
        width: 100%;
        font-size: 16px;
    }

    &:after, &:before {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    
    &:after {
        border-color: rgba(0, 0, 0, 0);
        border-bottom-color: var(--v-foreground-base);
        border-width: 14px;
        margin-left: -14px;
    }
    
    &:before {
        border-color: rgba(0, 0, 0, 0);
        border-bottom-color: rgb(190, 190, 190);
        border-width: 15px;
        margin-left: -15px;
    }

    &.arrow-top {
        &:after, &:before {
            bottom: unset;
            top: 100%;
        }

        &:after {
            border-bottom-color: rgba(0, 0, 0, 0) !important;
            border-top-color: var(--v-foreground-base);
        }
        
        &:before {
            border-bottom-color: rgba(0, 0, 0, 0) !important;
            border-top-color: rgb(190, 190, 190);
        }
    }
}